import React from 'react';
import {Card, Input, Radio, Modal, Buton, Select, message,Form,Button,Table,DatePicker} from 'antd';
import axios from 'axios'
import moment from 'moment';
import './../../style/common.less';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Option = Select.Option;
export default class User extends React.Component{
    state ={
        isVisible:false
    }
    componentWillMount() {
        axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/user")
        .then((res) => {
            console.log(res.data.list)
           this.setState({
               userName:res.data.list
           })
           
        })
    }
    handleSubmit = () => {
        let type = this.state.type
        let data = this.userForm.props.form.getFieldsValue();
        console.log(data)
        if(type=="edit") {
            message.success("编辑成功")
        }
        if(type=="create") {
            message.success("创建成功")
        }
        this.userForm.props.form.resetFields()
        this.setState({
            isVisible:false,
            selectedRowKeys:""
        })
    }
    onRowClick = (record, index) => {
        let selectKey=[index];
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem: record
        })
    }
    hanleOperateUser = () => {
        this.setState({
            isVisible:true
        })
    }
    hanleOperate = (type) => {
        //先获取当前选中的对象
        let item = this.state.selectedItem
        if(type == 'create') {
            this.setState({
                type,
                isVisible:true,
                title:"创建员工"
            })
        } else if(type == 'edit') {
            if(!item) {
                Modal.info({
                    title:"提示",
                    content: "请选择一个用户"
                })
                return false;
            }
            this.setState({
                type,
                isVisible:true,
                title:"编辑员工",
                userInfo : item
            })
        } else if(type =='detail') {
            if(!item) {
                Modal.info({
                    title:"提示",
                    content: "请选择一个用户"
                })
                return false;
            }
            this.setState({
                type,
                isVisible:true,
                title:"员工详情",
                userInfo : item
            })
        } else {
            if(!item) {
                Modal.info({
                    title:"提示",
                    content: "请选择一个用户"
                })
                return false;
            }
            let _this = this;
            Modal.confirm({
                title:"确认删除",
                content:'是否删除当前员工',
                onOk() {
                    message.success("删除成功")
                    _this.setState({
                        isVisible:false,
                        selectedRowKeys:""
                    })
                }
            })
        }
    }
  render() {
    const columns = [ 
        {
            title:'id',
            dataIndex:'id'
        },
        {
            title: '用户名',
            dataIndex: 'username'
        },
        {
            title: '性别',
            dataIndex: 'sex',
            render(sex) {
                return sex=="1"?"男":"女"
            }
        },
        {
            title: '状态',
            dataIndex: 'state',
            render(state) {
                return {
                    "1" : "咸鱼一条",
                    "2" : "鲤鱼打挺",
                    "3" : "啥也不说",
                    "4" : "干就完了",
                    "5" : "风华正茂",
                }[state]
            }
        },
        {
            title: '爱好',
            dataIndex: 'interest',
            render(interest) {
                return {
                    "1" : "篮球",
                    "2" : "足球",
                    "3" : "羽毛球",
                    "4" : "棒球",
                    "5" : "垒球",
                    "6" : "壁球",
                    "7" : "乒乓球",
                    "8" : "保龄球",
                }[interest]
            }
        },
        {
            title: '生日',
            dataIndex: 'birthday'
        },
        {
            title: '联系地址',
            dataIndex: 'address'
        },
        {
            title: '早起时间',
            dataIndex: 'time'
        }
    ]
        const selectedRowKeys = this.state.selectedRowKeys
        const rowSelection = {
            type:"radio",
            selectedRowKeys
        
        }
      return(
          <div>
             <Card title="用户登录" className="card-wrap">
                <Form layout="inline">
                    <FormItem>
                        <Input placeholder="请输入用户名" />
                    </FormItem>
                    <FormItem>
                        <Input placeholder="请输入密码" />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" >登录</Button>
                    </FormItem>
               </Form>
             </Card>
             <Card title="用户登录" className="card-wrap">
                   {/* <Button type="primary" icon="plus"  onClick={this.hanleOperateUser}>创建员工</Button> */}
                   <Button type="primary" icon="plus"  onClick={() => this.hanleOperate('create')}>创建员工</Button>
                   <Button type="primary" icon="edit"  onClick={() => this.hanleOperate('edit')}>编辑员工</Button>
                   <Button type="primary" icon=""  onClick={() => this.hanleOperate('detail')}>员工详情</Button>
                   <Button type="delete"  icon="delete" onClick={() => this.hanleOperate('delete')}>删除员工</Button>
            </Card>
            <Table 
                columns={columns}
                dataSource={this.state.userName}
                selectedRowKeys={this.state.selectedRowKeys}
                rowSelection={rowSelection}
                onRow={(record, index) => {
                    return{
                        onClick:()=> {
                            this.onRowClick(record,index);
                        }
                    }
                }}
            >
            </Table>
            <Modal
                title={this.state.title}
                visible={this.state.isVisible}
                 onOk={this.handleSubmit}
                onCancel={() => {
                    this.userForm.props.form.resetFields();
                    this.setState({
                        isVisible:false
                    })
                }}
                width={600}
                >
                    <UserForm 
                         type={this.state.type}
                         userInfo={this.state.userInfo}
                         wrappedComponentRef={(inst)=>this.userForm = inst}
                    />
            </Modal>
          </div>
      )
  }
}
class UserForm extends React.Component{
    getState = (state) =>{
        return{
            "1" : "咸鱼一条",
            "2" : "鲤鱼打挺",
            "3" : "啥也不说",
            "4" : "干就完了",
            "5" : "风华正茂",
        }[state]
    }
    render() {
        let type = this.props.type;
        const formItemLayout = {
            labelCol:{span:5},
            wrapperCol:{span:12}
        }
        const { getFieldDecorator} = this.props.form;
        let userInfo = this.props.userInfo || {};
        return(
            <Form>
                <FormItem label="姓名" {...formItemLayout}>
                    {
                         type=='detail'?userInfo.username:
                        getFieldDecorator("user_name",{
                            initialValue:userInfo.username
                        })(
                            <Input type="text" placeholder="请输入姓名" />
                        )
                    }
                </FormItem>
                <FormItem label="性别" {...formItemLayout}>
                {
                     type=='detail'?userInfo.sex==1?"男":"女":
                    getFieldDecorator('sex',{
                        initialValue:userInfo.sex
                    })(
                       <RadioGroup>
                            <Radio value={1}>男</Radio>
                            <Radio value={2}>女</Radio>
                       </RadioGroup> 
                    )
                }
            </FormItem>
            <FormItem label="状态" {...formItemLayout}>
                {
                     type=='detail'?this.getState(userInfo.state):
                    getFieldDecorator('state',{
                        initialValue:userInfo.state
                    })(
                      <Select>
                        <Option value={1}>咸鱼一条</Option>
                        <Option value={2}>鲤鱼打挺</Option>
                        <Option value={3}>金桔太没</Option>
                        <Option value={4}>又见面</Option>
                        <Option value={5}>咸鱼翻身</Option>
                      </Select>
                    )
                }
            </FormItem>
            <FormItem label="生日" {...formItemLayout}>
                {
                    type=='detail'?userInfo.birthday:
                    getFieldDecorator('birthday',{
                        initialValue:moment(userInfo.birthday)
                    })(
                      <DatePicker />
                    )
                }
            </FormItem>

            <FormItem label="联系地址" {...formItemLayout}>
            {
                  type=='detail'?userInfo.address:
                getFieldDecorator('address',{
                    initialValue:userInfo.address
                })(
                  <TextArea rows={3} placeholder="请输入联系地址" />
                )
            }
        </FormItem>
        {/* <FormItem label="选出心中的明星" {...formItemLayout}>
            {
                getFieldDecorator("sel",{
                    initialValue:"1"
                })(
                    <Select >
                        <Option value="1">詹姆斯</Option>
                        <Option value="2">杜兰特</Option>
                        <Option value="3">库里</Option>
                        <Option value="4">哈登</Option>
                        <Option value="5">奥尼尔</Option>
                    </Select>
                )
            }
        </FormItem> */}
            </Form>
            
        )
    }
}
UserForm = Form.create({})(UserForm)
